<ui:composition template="/pages/modelo.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
				xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets">
 
    <ui:define name="conteudoCabecalho">
        Olha o conteúdo do cabeçalho aqui gente!
    </ui:define>
 
    <ui:define name="conteudoCorpo">
        
		<h:form id="form">
			<table>
				<tr>
					<td><h:outputLabel for="id" value="Id : " /></td>
					<td><p:inputText id="id" value="#{userMB.id}">
							<f:converter converterId="javax.faces.Integer" />
							<p:ajax event="blur" update="idMsg" />
						</p:inputText> <p:message id="idMsg" for="id" display="icon" /></td>
				</tr>
				<tr>
					<td><h:outputLabel for="name" value="Name : " /></td>
					<td><p:inputText id="name" value="#{userMB.name}">
							<f:validateLength minimum="5" />
							<p:ajax event="blur" update="nameMsg" />
						</p:inputText> <p:message id="nameMsg" for="name" display="icon" /></td>
				</tr>
				<tr>
					<td><h:outputLabel for="surname" value="Surname : " /></td>
					<td><p:inputText id="surname" value="#{userMB.surname}">
							<f:validateLength minimum="5" />
							<p:ajax event="blur" update="surnameMsg" />
						</p:inputText> <p:message id="surnameMsg" for="surname" display="icon" /></td>
				</tr>
				<tr>
					<td><h:outputLabel for="dateOfExpense" value="Date : " /></td>
					<td><h:inputText id="dateOfExpense" value="#{userMB.dateOfExpense}"
							size="20" required="true" label="Receipt Date">
							<f:convertDateTime pattern="d-M-yyyy" />
						</h:inputText></td>
				</tr>
				<tr>
					<td><p:commandButton id="addUser" value="Add"
							action="#{userMB.addUser}" ajax="false" /></td>
					<td><p:commandButton id="reset" value="Reset"
							action="#{userMB.reset}" ajax="false" /></td>
				</tr>
			</table>
		</h:form>

		<script type="text/javascript">
			$(function(){
			    $("#form\\:dateOfExpense").datepicker({dateFormat:'dd/mm/yyyy', showAnim:'drop'});
			});
		</script>

    </ui:define>
 
    <ui:define name="conteudoRodape">
        Eu sou apenas o rodapé =/
    </ui:define>
</ui:composition>

